<template>
	<view class="container">
		<view class="head">
			<view class="head-top">
				<u-avatar :src="src"></u-avatar>
				<view style="margin-left: 30rpx;">{{obj.name}}</view>
			</view>
			<view class="head-txt">
				<view class="head-txt-item">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:{{obj.code}}</view>
				<view class="head-txt-item">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:{{obj.grade_name}}{{obj.classes_name}}</view>
				<view class="head-txt-item">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:{{obj.sex}}</view>
				<view class="head-txt-item">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:{{obj.birth}}</view>
				<view class="head-txt-item">入学时间:{{obj.school_at}}</view>
				<view class="head-txt-item" style="margin-bottom: 0rpx;">学校名称:{{obj.school_name}}</view>
			</view>
		</view>
		<view class="card">
			<u--form labelPosition="left" :model="uForm" :rules="rules" ref="uForm" labelWidth='90'>
				<u-form-item label="与学生关系:" prop="relate">
					<u--input v-model="uForm.relate" placeholder="与学生关系"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn">
			<u-button type="primary" text="确认绑定" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		studentbind
	} from '@/api/student.js'
	export default {
		data() {
			return {
				src: 'https://jiaofei-1259503077.cos.ap-beijing.myqcloud.com/1.png',
				obj: {},
				uForm: {
					relate: '',
				},
				rules: {
					relate: {
						type: 'string',
						required: true,
						message: '请输入与学生关系',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(e) {
			this.obj=JSON.parse(e.obj)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async () => {
					let res = await studentbind({
						...this.uForm,
						id:this.obj.id
					})
					if (res.code == 200) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 1000)

					} else {
						uni.$u.toast(res.msg);
					}

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.btn {
			margin: 0 auto;
			margin-top: 50rpx;
			width: 20%;

		}

		.card {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 50rpx;
		}

		.head {
			width: 100%;
			border-radius: 20rpx;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);

			.head-txt {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.head-txt-item {
					margin-bottom: 20rpx;
					color: #515151;
					font-weight: 600;

				}
			}

			.head-top {
				width: 100%;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				height: 100rpx;
				background-color: #449bed;
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				box-sizing: border-box;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>